<!--
 * @Author: jiangyg email@jiangyg.com
 * @Date: 2022-11-12 05:49:58
 * @LastEditors: jiangyg email@jiangyg.com
 * @LastEditTime: 2022-11-23 21:18:53
 * @FilePath: /frontend/mall-frontend/src/components/icon-svg/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <svg class="icon-svg" :style="style" aria-hidden="true">
    <use :xlink:href="getName"></use>
  </svg>
</template>

<script lang="ts" setup>
import { computed, reactive } from "vue";

const props = defineProps({
  name: {
    type: String,
    required: true
  },
  size: {
    type: Number,
    default () {
      return 1;
    }
  },
});

// 图标在 iconfont 中的名字
const getName = computed(() => {
  return `#icon-${props.name}`;
});

// 图标样式
const style = computed(() => {
  return {
    width: `${props.size}em`,
    height: `${props.size}em`,
  };
});
</script>

<style>
.icon-svg {
  fill: currentColor;
  overflow: hidden;
}
</style>
